<template>
  <div class="refill-page">
    <loading :show="loading" />
    <div class="form">
      <p>
        <label>ID:</label>
        <span>
          <cube-input type="text" v-model="postForm.id" disabled />
        </span>
      </p>
      <p>
        <label>昵称:</label>
        <span>
          <cube-input type="text" v-model="postForm.nickname" disabled />
        </span>
      </p>
      <p>
        <label>手机号码:</label>
        <span>
          <cube-input type="text" v-model="postForm.mobile" disabled />
        </span>
      </p>
      <p>
        <label class="color">充值金额:</label>
        <span>
          <cube-input type="text" v-model="postForm.amount" ref="amount" />
        </span>
      </p>
      <p>
        <label></label>
        <span class="tips">最小充值金额为{{ mini }}</span>
      </p>
      <p class="submit">
        <span @click="createRefillOrder">充值</span>
      </p>
    </div>
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'ServiceAbout',
  components: {
    Loading
  },
  data() {
    return {
      loading: false,
      disabled: false,
      postForm: {
        amount: 100
      },
      mini: 100
    }
  },
  methods: {
    /**
     * get refill condition
     */
    fetchData() {
      this.loading = true
      api.Account.fetchRefill().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.postForm = {
          amount: data.mini,
          ...data.user
        }
        this.mini = data.mini
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * create user refill order
     */
    createRefillOrder() {
      if (!this.disabled) {
        this.disabled = true
        this.loading = true
        api.Account.creatRefillOrder({ ...this.postForm }).then(response => {
          let { data } = response
          data = base64.parse(data)
          const serial = {
            user_refill_id: data.user_refill_id
          }
          this.$router.push(`/pay/${base64.encode(serial)}`)
        }).finally(() => {
          this.loading = false
          this.disabled = false
        })
      }
    }
  },
  created () {
    this.fetchData()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.amount.focus()
    })
  }
}
</script>

<style scoped lang="stylus">
.refill-page
  .form
    margin 20px
    padding 20px
    background white
    border-radius 10px
    p
      display flex
      height 40px
      line-height 40px
      margin-bottom 10px
      label
        width 80px
        text-align right
        padding-right 10px
        font-weight 700
        &.color
          color red
      span
        flex 1
        padding-right 15px
        &.tips
          text-align left
          color $main_color
          margin-top -10px
      &.submit
        display block
        height 33px
        line-height 33px
        span
          display inline-block
          background $main_color
          color white
          padding 0 50px
          border-radius 15px
</style>
